<template>
	<view class="box">
		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" circular :duration="duration"
			class="banner">
			<swiper-item v-for="(item,index) in banner" :key='index' class="bannerimg">
				<image class="bannerimg" :src="item.ad_pic"></image>
			</swiper-item>
		</swiper>
       <view class="searchbox">
	<image src="../../static/3.png"  class="search"></image>
	<view >搜美食,菜谱</view>
</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				banner: [], //轮播图片
				indicatorDots: true,
				autoplay: true, //自动播放
				interval: 2000, //滑动间隔
				duration: 500 //每个滑动时间
			}
		},
		methods: {

		},
		created() {
			uni.request({
				url: baseUrl + '/index/home_banner', //接口地址。
				method: 'POST',
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					// console.log(res.data)
					this.banner = res.data.data

				}
			});
		}
	}
</script>

<style>
	.box{position: relative;
		}
	.bannerimg {
		width: 100%;
		height: 200px;
	}
	.searchbox{
		width: 90%;
		margin: auto;
		display: flex;
		height: 40px;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		background-color: #fff;
		position: absolute;
        left: 5%;	
	   bottom: -20px;
	   box-shadow: 1px 1px 10px 1px #ccc;
	}
	.search{
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}
</style>
